<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Collaborative Drawing</title>
	<link href="<?=base_url()?>assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
	var classGroups = new Array();
	var classGroupsId = new Array();
	
	<?foreach($classes as $class){?>
		<?  
			$group_array=array();
			$group_id_array=array();
			foreach($class->GROUPS as $class_group){
				array_push($group_array,'"'.$class_group->DRAWING_GROUP_NAME.'"');
				array_push($group_id_array,'"'.$class_group->DRAWING_GROUP_ID.'"');
			}
		?>
	classGroups[<?=$class->DRAWING_CLASS_ID?>] = [<?=implode(",",$group_array)?>] ;
	classGroupsId[<?=$class->DRAWING_CLASS_ID?>] = [<?=implode(",",$group_id_array)?>] ;
		
	<?}?>
	function classChanged(classId)
	{
		var selectObject = document.getElementById("group_select");
		var originalLength = selectObject.options.length;
		for(i=0;i<originalLength;i++)
		{
			selectObject.remove(0);
		}
		// alert(classGroups[classId]);
		for(i=0;i<classGroups[classId].length;i++)
		{
			
			var option=document.createElement("option");
			option.text=classGroups[classId][i];
			option.value=classGroupsId[classId][i];
			
			selectObject.add(option);
		}
	}
	function submitClicked()
	{
		var groupSelect = document.getElementById("group_select");
		var classSelect = document.getElementById("class_select");
		if(classSelect.selectedIndex == -1 || groupSelect.selectedIndex == -1)
		{
			alert("Please select class and group");
		}
	}
</script>
<div id="container">
	<?php include('header_view.php'); ?>
		<div id="top_container">
		<div class="class_pick">
			<div class="title">
				<h3>Class</h3>
			</div>
			<select name="class" id="class_select" size="6"  onchange="classChanged(this.options[this.selectedIndex].value)">
				<?foreach($classes as $class){?>
					<option value="<?=$class->DRAWING_CLASS_ID?>"><?=$class->DRAWING_CLASS_NAME?></option>
				<?}?>
			</select>
			<script>
				
			</script>
		</div>
		</div>
		<div class="class_pick">
			<div class="title">
				<h3>Group</h3>
				
			</div>
			<select name="groups" size="6" id="group_select">
			
			</select>
		</div>
		<div id="submit_button">
		<input type="button" onClick="submitClicked()" name="category" value="Submit"></input>
		<a href="<?=base_url()?>auth/logout" style="text-decoration:none;"><input type="button" name="logout" value="Logout"></input></a>
		</div>
		
</div>

</body>
</html>